<template>
  <a-layout-header>
    <img v-for="(image, index) in images" :key="index" :src="image.src" :media="image.media" rel="apple-touch-startup-image" />
  </a-layout-header>
</template>

<script>
import { defineComponent } from 'vue';
import appleSplash20482732 from '@/assets/apple/apple-splash-2048-2732.png';
import appleSplash27322048 from '@/assets/apple/apple-splash-2732-2048.png';
import appleSplash16682388 from '@/assets/apple/apple-splash-1668-2388.png';
import appleSplash23881668 from '@/assets/apple/apple-splash-2388-1668.png';
import appleSplash15362048 from '@/assets/apple/apple-splash-1536-2048.png';
import appleSplash20481536 from '@/assets/apple/apple-splash-2048-1536.png';
import appleSplash16682224 from '@/assets/apple/apple-splash-1668-2224.png';
import appleSplash22241668 from '@/assets/apple/apple-splash-2224-1668.png';
import appleSplash16202160 from '@/assets/apple/apple-splash-1620-2160.png';
import appleSplash21601620 from '@/assets/apple/apple-splash-2160-1620.png';
import appleSplash12902796 from '@/assets/apple/apple-splash-1290-2796.png';
import appleSplash27961290 from '@/assets/apple/apple-splash-2796-1290.png';
import appleSplash11792556 from '@/assets/apple/apple-splash-1179-2556.png';
import appleSplash25561179 from '@/assets/apple/apple-splash-2556-1179.png';
import appleSplash12842778 from '@/assets/apple/apple-splash-1284-2778.png';
import appleSplash27781284 from '@/assets/apple/apple-splash-2778-1284.png';
import appleSplash11702532 from '@/assets/apple/apple-splash-1170-2532.png';
import appleSplash25321170 from '@/assets/apple/apple-splash-2532-1170.png';
import appleSplash11252436 from '@/assets/apple/apple-splash-1125-2436.png';
import appleSplash24361125 from '@/assets/apple/apple-splash-2436-1125.png';
import appleSplash12422688 from '@/assets/apple/apple-splash-1242-2688.png';
import appleSplash26881242 from '@/assets/apple/apple-splash-2688-1242.png';
import appleSplash8281792 from '@/assets/apple/apple-splash-828-1792.png';
import appleSplash1792828 from '@/assets/apple/apple-splash-1792-828.png';
import appleSplash12422208 from '@/assets/apple/apple-splash-1242-2208.png';
import appleSplash22081242 from '@/assets/apple/apple-splash-2208-1242.png';
import appleSplash7501334 from '@/assets/apple/apple-splash-750-1334.png';
import appleSplash1334750 from '@/assets/apple/apple-splash-1334-750.png';
import appleSplash6401136 from '@/assets/apple/apple-splash-640-1136.png';
import appleSplash1136640 from '@/assets/apple/apple-splash-1136-640.png';

export default defineComponent({
  name: 'AppleHeader',
  data() {
    return {
      images: [
        { src: appleSplash20482732, media: '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash27322048, media: '(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash16682388, media: '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash23881668, media: '(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash15362048, media: '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash20481536, media: '(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash16682224, media: '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash22241668, media: '(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash16202160, media: '(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash21601620, media: '(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash12902796, media: '(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash27961290, media: '(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash11792556, media: '(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash25561179, media: '(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash12842778, media: '(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash27781284, media: '(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash11702532, media: '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash25321170, media: '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash11252436, media: '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash24361125, media: '(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash12422688, media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash26881242, media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash8281792, media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash1792828, media: '(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash12422208, media: '(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' },
        { src: appleSplash22081242, media: '(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' },
        { src: appleSplash7501334, media: '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash1334750, media: '(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
        { src: appleSplash6401136, media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' },
        { src: appleSplash1136640, media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' },
      ]
    };
  }
});
</script>

<style scoped>
/* ... existing code ... */
</style>
